<template>
  <div>
    <div class="weui-cell">
      <svg class="icon iconMargin" aria-hidden="true">
        <use xlink:href="#iconlaba"></use>
      </svg>
      项目进行
      <span class="runDay">{{getNowDayDiff(startTime)}}</span>
      天啦，离结束还有
      <span class="moreDay">{{getDayDiff(startTime,endTime)}}</span>天！
    </div>
    <div class="weui-cell">
      <svg class="icon iconMargin" aria-hidden="true">
        <use xlink:href="#iconbenpao"></use>
      </svg>
      <span class="time">{{startTime}}</span>- <span class="time">{{endTime}}</span>
    </div>
    <el-divider></el-divider>
  </div>
</template>

<script>
export default {
  name: 'dateShow',
  data () {
    return {
      startTime: sessionStorage.getItem('projectStartTime'),
      endTime: sessionStorage.getItem('projectEndTime')
    }
  },
  methods: {
    getNowDayDiff (sTime) {
      if (!sTime) return ''
      sTime = new Date(sTime.replace(/-/g, '/'))
      let date = new Date()
      let nowDiff = date.getTime() - sTime.getTime()
      this.nowDayDiff = Math.floor(nowDiff / (24 * 3600 * 1000))
      return this.nowDayDiff
    },
    getDayDiff (sTime, eTime) {
      if (!sTime || !eTime) return ''
      let date = new Date()
      eTime = new Date(eTime.replace(/-/g, '/'))
      let diff = eTime.getTime() - date.getTime()
      this.dayDiff = Math.floor(diff / (24 * 3600 * 1000))
      return this.dayDiff
    }
  }
}
</script>

<style lang="stylus" scoped>
  .runDay
    color #3443fd
    font-size xx-large
    margin 0 .5rem 0 .5rem
  .moreDay
    color #6371fd
  .iconMargin
    margin-right .2rem
  .time
    font-size 18px
    margin-left  0.5rem
    margin-right .5rem
    color #757575
</style>
